<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<title></title>
		<style>
			img {
				width: 100%;
				height: 100%;
			}
			
			html,
			body {
				height: 100%;
				width: 100%;
			}
			
			#pageone,
			#pagetwo,
			#pagethree {
				width: 100%;
				height: 100%;
				font-size: 2rem;
				position: absolute;
				left: -20000px;
				top: 0;
				color: #FFFFFF;
			}
			
			@keyframes one {
				from {
					left: -20000px;
					color: rgba(33, 33, 234, 0.5);
				}
				to {
					left: 0;
					color: rgba(255, 255, 255, 1)
				}
			}
			
			@keyframes two {
				from {
					left: 20000px;
					color: rgba(33, 33, 234, 0.5);
					top: 100%;
				}
				to {
					left: 0;
					color: rgba(255, 255, 255, 1);
					top: 0;
				}
			}
			
			@keyframes three {
				from {
					left: 100px;
					color: #C2C2C2;
					bottom: 0%;
				}
				to {
					left: 0;
					color: rgba(255, 255, 255, 1);
					top: 0;
				}
			}
			
			#pageone>div:nth-of-type(1),
			#pagetwo>div:nth-of-type(1),
			#pagethree>div:nth-of-type(1) {
				position: absolute;
				width: 1.5rem;
				left: 10%;
				top: 10%;
			}
			
			#pageone>div:nth-of-type(2),
			#pagetwo>div:nth-of-type(2),
			#pagethree>div:nth-of-type(2) {
				position: absolute;
				width: 1.5rem;
				left: 25%;
				top: 25%;
			}
			
			#in {
				position: absolute;
				width: 100px;
				height: 40px;
				background: rgba(44, 44, 44, 0.6);
				line-height: 40px;
				left: calc(100% - 110px);
				bottom: 1%;
				text-align: center;
			}
		</style>
	</head>

	<body id="body">
		<img src="../../image/appPage.png" id="start" />
		<div id="pageone">
			<div>兼职旅行</div>
			<div>说走就走</div>
		</div>
		<div id="pagetwo">
			<div>任性小任务</div>
			<div>积累大收获</div>
		</div>

		<div id="pagethree">
			<div>紧急应招</div>
			<div>成就职场新贵</div>
			<span id="in">进入&gt;</span>
		</div>
		<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//判断是否第一次打开APP
			var appOpen=$.cookie("appOpen");
			if(appOpen == undefined ){
				appOpen="false";
			}
			
			if(appOpen == "true") {
				setTimeout(goLogin, 3000);
					$("#start").click(goLogin);
			}
		
			$("#in").click(goLogin);

			function goLogin() {
				window.open("login.html", "_self");
				$.cookie("appOpen","true",{expires: 7});;
			}
			var imgArry = ['appPage.png', "yindao1.png", "yindao2.png", "yindao3.png"];
			var imgIndex = 0;

			function judge() {
				if(appOpen == 0) {
					return;
				}
				var startx;
				var endx;
				var el = document.getElementById('body');

				function cons() {
					if(startx > endx && Math.abs(startx - endx) > 200) {
						imgIndex++;
						if(imgIndex > 3) {
							imgIndex = 3;
						}
					} else if(startx < endx && Math.abs(startx - endx) > 200) {
						imgIndex--;
						if(imgIndex <= 0) {
							imgIndex = 0;
						}
					}
					switch(imgIndex) {
						case 0:
							$("#pageone").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							});
							$("#pagetwo").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							});
							$("#pagethree").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							});
							break;
						case 1:
							$("#pageone").css({
								"animation": "one 1s",
								"animation-fill-mode": "both"
							});
							$("#pagetwo").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							$("#pagethree").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							break;
						case 2:
							$("#pageone").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							$("#pagetwo").css({
								"animation": "two 1s",
								"animation-fill-mode": "both"
							})
							$("#pagethree").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							break;
						case 3:
							$("#pageone").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							$("#pagetwo").css({
								"animation": "none",
								"animation-fill-mode": "forwards"
							})
							$("#pagethree").css({
								"animation": "three 1s",
								"animation-fill-mode": "both"
							})
							break;
						default:
							break;
					}
					$("#start").attr("src", "../../image/" + imgArry[imgIndex]);
				}

				el.addEventListener('touchstart', function(e) {
					var touch = e.changedTouches;
					startx = touch[0].clientX;
					starty = touch[0].clientY;
				});
				el.addEventListener('touchend', function(e) {
					var touch = e.changedTouches;
					endx = touch[0].clientX;
					endy = touch[0].clientY;
					cons();
				});
			}

			judge();
		</script>
	</body>

</html>